<template>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/overview' }">
        <h3>首页</h3>
      </el-breadcrumb-item>
      <el-breadcrumb-item >
        <h3>接口详情</h3>
      </el-breadcrumb-item>
  
    </el-breadcrumb>
  
    <!-- 添加一个卡片  -->
    <el-card class="box-card">
  
      <el-form status-icon label-width="120px" class="demo-ruleForm" :model="ruleFormmodel" ref="ruleFormRef"
        :rules="webautorules">
  
  
        <el-form-item label="元素类型选择1:" prop="type1">
          <el-select v-model="ruleFormmodel.type1" placeholder="类型选择" style="width:500px">
            <el-option label="ID" value="By.ID" />
            <el-option label="XPATH" value="By.XPATH" />
            <el-option label="NAME" value="By.NAME" />
            <el-option label="CSS" value="By.CSS" />
  
          </el-select>
        </el-form-item>
  
  
        <el-form-item label="元素定位路径1:" prop="elementpath1">
          <el-input style="width:500px" v-model="ruleFormmodel.elementpath1" />
        </el-form-item>
  
  
        <el-form-item label="元素类型选择2:" prop="type2">
          <el-select v-model="ruleFormmodel.type2" placeholder="类型选择" style="width:500px">
            <el-option label="ID" value="By.ID" />
            <el-option label="XPATH" value="By.XPATH" />
            <el-option label="NAME" value="By.NAME" />
            <el-option label="CSS" value="By.CSS" />
  
          </el-select>
        </el-form-item>
  
  
        <el-form-item label="元素定位路径2:" prop="elementpath2">
          <el-input style="width:500px" v-model="ruleFormmodel.elementpath2" />
        </el-form-item>

        
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button type="primary" @click="onSubmit">追加</el-button>
          <el-button type="success" @click="onreset">重置</el-button>
        </el-form-item>
  
      </el-form>
  
    </el-card>
  
  
  
  </template>
  
  <script setup>
  //ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个 .value 属性
  //   1、scope.$index 代表拿到每一行的index
  // 2、scope.row代表拿到每一行的数据
  //    响应式数据  ref
  // const obj = reactive({ name: "name" });
  import { ref, reactive } from 'vue'               //处理响应式数据 ,需要导入
  import { findlerelement } from '../../../api/index'
  import { ArrowRight } from '@element-plus/icons-vue'    //图标显示引用
  
  // 添加用户 传参 
  const ruleFormmodel = reactive({
    type1: '',
    elementpath1: '',
    type2: '',
    elementpath2: '',
    type3: '',
    elementpath3: '',
    type4: '',
    elementpath4: ''
  
  
  })
  
  const webautorules = reactive({
    type1: [
      {
        required: true,            //是否是必须的
        message: 'Please choose one',
        trigger: 'blur',       //离开这个焦点的时间触发
      }
    ],
    elementpath1: [
      {
        required: true,            //是否是必须的
        message: 'Please input',
        trigger: 'blur',       //离开这个焦点的时间触发
      }
    ]
  
  })
  
  // 触发请求后, 数据
  const ruleFormRef = ref(null)
  
  // 提交
  function onSubmit() {
  
    console.log("onSubmit")
  
  
    ruleFormRef.value.validate(isValid => {              //只有在校验正确的情况下,才触发请求 
      if (isValid) {
  
        //添加元素,向后台进行请求 
        findlerelement(ruleFormmodel).then(res => {
          console.log(res)
  
        })
      }
      else {
        // ElMessage({
        //     message: '请输入正确的信息再提交',
        //     type: 'warning',
        // })
      }
      // 清空form中的内容 
      onreset()
  
    }
    )
  }
  
  
  // 重置
  
  function onreset() {
  
    console.log(ruleFormRef)
    ruleFormRef.value.resetFields()
  
  }
  
  
  
  
  </script > 
  
  <style lang="less" scoped>
  
  .box-card {
      height: 100%;
  }
  </style>